<template>
  <div class="parameter-product" v-for="(item, index) in printData" :key="index">
    <div class="print-content" id="printArea">
      <div class="flex justify-center mb-6">
        <span class="text-xl font-bold text-gray-800">加工入库单({{ item.taskCode }})</span>
      </div>
      <hr />
      <el-table :data="tableDataList[index] || []" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="category" label="商品品类" />
        <el-table-column prop="goodsCode" label="商品编码" />
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="spec" label="商品规格" />
        <el-table-column prop="unit" label="计量单位" />
        <el-table-column prop="num" label="加工任务数量" />
        <el-table-column prop="inNum" label="已入库数量" />
        <el-table-column prop="inUser" label="入库人" />
        <el-table-column label="入库状态">
          <template #default="scope">
            <span v-if="scope.row.inStatus === 1">未入库</span>
            <span v-else-if="scope.row.inStatus === 2">部分入库</span>
            <span v-else-if="scope.row.inStatus === 3">全部入库</span>
            <span v-else>{{ scope.row.inStatus }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 将制单人和审核人信息移到表格外部，作为表格的补充信息 -->
      <el-row style="margin-top: 10px;">
        <el-col :span="8" style="text-align: left;">
          <span>库管员:_____________</span>
        </el-col>
        <el-col :span="8" style="text-align: left;">
          <span>仓库负责人:_____________</span>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px; text-align: center;">
      <el-button type="primary" v-print="handlePrint">打印</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { queryTaskDetail } from '@/api/stockIn/processStockIn.js'
import { useRoute } from 'vue-router'

const tableDataList = ref([]); // 替代原 tableData
const rute = useRoute()
const printData = ref([])
const printType = ref('')

const loadPrintData = () => {
  const { printData: dataStr, printType: type } = rute.query

  const parseData = JSON.parse(dataStr)

  printType.value = type
  printData.value = parseData
  console.log('打印数据:', printData.value)
}

async function init() {
  for (const task of printData.value)
    try {
      // 使用对象扩展运算符简化参数构建
      const params = {
        a_type: 'process',
        page: 1,
        pageSize: 10,
        process: {
          ...task,
          taskId: task.taskId
        }

      }
      const res = await queryTaskDetail(params)
      console.log(params)
      if (res.code === 200) {
        tableDataList.value.push(res.data.list)
        console.log(res.data.list)
      } else {
        console.error('获取数据失败:', res)
        // 可以在这里添加错误提示
        // ElMessage.error(`获取数据失败: ${res.msg || '未知错误'}`)
      }
    } catch (error) {
      console.error('接口请求错误:', error)
      // ElMessage.error('网络错误，请稍后重试')
    }
}

onMounted(() => {
  loadPrintData()
  init()
})

const handlePrint = ref({
  id: 'printArea',
  popTitle: '打印标题',
  preview: true,
});
</script>

<style scoped>
.parameter-product {
  padding: 30px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 30px;
}

.clickable {
  cursor: pointer;
  color: #409eff;
}

.demo-pagination-block {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  margin: 20px 0;
}

.search-container {
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.search-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.form-actions {
  display: flex;
  align-items: center;
}

.rute-info {
  margin: 15px 0;
  font-size: 14px;
  color: #666;
}

.rute-info span {
  margin-right: 20px;
}

@media print {
  .print-area {
    page-break-after: always;
  }
}
</style>